<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus';

const router = useRouter();
const tableData = ref([
  { name: '张三', age: 18, address: '上海' },
  { name: '李四', age: 20, address: '北京' },
  { name: '王五', age: 22, address: '广州' },
]);

const handleEdit = (row) => {
  router.push(`/user/edit/${row.name}`);
};

const handleDelete = (row) => {
  ElMessageBox.confirm(
      `确定要删除用户 ${row.name} 吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    tableData.value = tableData.value.filter(item => item.name !== row.name);
  }).catch(() => {});
};

const treeData = ref([
  {
    title: '红丝集团',
    children: [
      {
        title: '部门A',
        children: [
          { title: '部门A-1' },
          { title: '部门A-2' },
        ],
      },
      {
        title: '部门B',
        children: [
          { title: '部门B-1' },
          { title: '部门B-2' },
        ],
      },
    ]
  }
]);

</script>

<template>
  <el-main>
    <div class="flex-main">
      <div class="flex-left">
        <el-tree
            :data="treeData"
            :props="{ label: 'title' }"
            default-expand-all
            :render-content="renderContent"
        />
      </div>
      <div class="flex-right">
        <el-row>
          <el-col :span="24">
            <h1>用户管理</h1>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button type="primary" @click="router.push('/user/add')">添加用户</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="age" label="年龄"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
              <el-table-column label="操作">
                <template #default="{ row }">
                  <el-button type="text" @click="handleEdit(row)">编辑</el-button>
                  <el-button type="text" @click="handleDelete(row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-main>
</template>

<style scoped lang="less">
.flex-main {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
  .flex-left {
    flex: 0 20%;
  }

  .flex-right {
    flex: 1;
  }
}
</style>
